<template>
  <view class="dropdown">
    <view class="dropdown-selected" @click="this.isOpen = !this.isOpen;">
      {{ selectedLabel }}
      <text class="arrow" :class="{ 'open': isOpen }">▼</text>
    </view>
    <view v-if="isOpen" class="dropdown-options">
      <view
          v-for="(item, index) in memberList"
          :key="index"
          class="dropdown-option"
          @click="selectOption(item)">
        {{ item.userName }}
      </view>
    </view>
  </view>
</template>

<script>

import {listAllMember} from "../../api/project/member";

export default {
  name: 'MemberSelect',
  props: {
    value: [String],
    projectId: [String],
  },
  data() {
    return {
      memberList: [],
      isOpen: false
    };
  },
  watch: {
    projectId(){
      this.getList();
    },
  },
  computed: {
    selectedLabel() {
      const selected = this.memberList.find(option => option.userId == this.value);
      return selected ? selected.userName : '请选择';
    }
  },
  methods: {
    getList() {
      if(this.projectId===null||this.projectId===''){return;}
      listAllMember({projectId:this.projectId}).then(res => {
        this.memberList = res.data
      })
    },
    selectOption(item) {
      this.$emit('input', item.userId);
      this.isOpen = false;
    }
  }
};
</script>

<style scoped>
.dropdown {
  position: relative;
  width: 200px;
}

.dropdown-selected {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.arrow {
  transition: transform 0.3s;
}

.arrow.open {
  transform: rotate(180deg);
}

.dropdown-options {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-top: 5px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.dropdown-option {
  padding: 10px;
  cursor: pointer;
}

.dropdown-option:hover {
  background-color: #f0f0f0;
}
</style>
